<template>
  <div
    class="detail-wrap"
    v-loading="pageLoading"
    element-loading-background="rgba(255, 255, 255, 0.6)"
  >
    <div class="top-content">
      <el-button size="mini" type="primary" @click="handleGoBack"
        >返回</el-button
      >
    </div>
    <el-card class="card flow-card">
      <div class="flow-wrap">
        <div class="associated">
          <img src="@/assets/images/finance/associated.png" alt="" />
          <span class="text">关联商品</span>
        </div>
        <div class="line-blue"></div>
        <div class="associated">
          <img src="@/assets/images/finance/export.png" alt="" />
          <span class="text">导出模板</span>
        </div>
        <div class="line-blue"></div>
        <div class="associated">
          <img src="@/assets/images/finance/import.png" alt="" />
          <span class="text">导入模板</span>
        </div>
        <div class="line-blue"></div>
        <div class="associated">
          <img src="@/assets/images/finance/data-check.png" alt="" />
          <span class="text">数据校验</span>
        </div>
        <div class="line-blue"></div>
        <div class="associated">
          <img src="@/assets/images/finance/submit.png" alt="" />
          <span class="text">提交审核</span>
        </div>
      </div>
    </el-card>
    <el-card class="card form-card">
      <div class="left-wrap">
        <div class="item">
          <span class="title">已关联行数</span>
          <span class="account">({{ detailObj.exportCount }})</span>
        </div>
        <div class="item">
          <span class="title">已导入行数</span>
          <span class="account">({{ detailObj.importCount }})</span>
        </div>
        <div class="item">
          <span class="title">校验成功行数</span>
          <span class="account">({{ detailObj.validSuccessCount }})</span>
        </div>
        <div class="item">
          <span class="title">校验异常行数</span>
          <span class="account">({{ detailObj.validErrorCount }})</span>
        </div>
        <div class="btn-wrap">
          <el-button type="text" :disabled="!detailObj.validSuccessCount" @click="exportFileService('outputOutputData')"
            >导出正常数据(审核)</el-button
          >
          <el-button
            type="text"
            :disabled="!detailObj.validErrorCount"
            @click="exportFileService('outputValidErrorData')"
            >导出异常数据</el-button
          >
        </div>
      </div>
      <div class="right-wrap">
        <el-form ref="submitForm" :model="detailObj" label-width="130px">
          <el-form-item label="发起标题:">
            <el-input
              show-word-limit
              maxlength="30"
              disabled
              v-model.trim="detailObj.title"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否自动调整售价:">
            <el-select v-model="detailObj.autoModifySaleprice" disabled placeholder="请选择">
              <el-option
                v-for="item in autoModifySalepriceOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述:">
            <el-input
              type="textarea"
              show-word-limit
              maxlength="200"
              :rows="7"
              disabled
              v-model.trim="detailObj.reason"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="card info-card">
      <el-row>
        <span class="item"
          >单据号：<span>{{ detailObj.batchNo }}</span></span
        >
        <span class="item"
          >单据状态：<span>{{ detailObj.batchStatusName }}</span></span
        >
        <span class="item"
          >制单人：<span>{{ detailObj.createdUserName }}</span></span
        >
        <span class="item"
          >制单时间：<span>{{ detailObj.createdAt }}</span></span
        >
        <span class="item"
          >提交人：<span>{{ detailObj.submitUserName }}</span></span
        >
        <span class="item"
          >提交时间：<span>{{ detailObj.submitAt }}</span></span
        >
        <span class="item"
          >所属部门：<span>{{ detailObj.departmentName }}</span></span
        >
        <span class="item"
          >所属区域：<span>{{ detailObj.areaName }}</span></span
        >
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import { isResponseSuccess } from '@/utils/bizUtils';

export default {
  data () {
    return {
      pageLoading: false,
      detailObj: {
        batchNo: '',
        batchStatusName: '',
        createdUserName: '',
        createdAt: '',
        submitUserName: '',
        submitAt: '',
        departmentName: '',
        areaName: '',
        exportCount: '0',
        importCount: '0',
        validSuccessCount: '0',
        validErrorCount: '0',
        title: '',
        reason: '',
        autoModifySaleprice: 1,
      },
      autoModifySalepriceOption: [
        { label: '是', value: 1 },
        { label: '否', value: 2 }
      ]
    };
  },
  created () {
    const { batchNo } = this.$route.query;
    this.batchNo = batchNo;
    if (batchNo) {
      this.getDetailService(batchNo);
    }
  },
  methods: {
    // 导出文件
    exportFileService (type) {
      this.pageLoading = true;
      ApiRequest(
        `/dataBatch/purchasePrice/file/downloadUrl/${type}/${this.batchNo}`,
        'get',
        {}
      )
        .then((res) => {
          this.pageLoading = false;
          if (isResponseSuccess(res)) {
            if (res.retData && res.retData.downloadUrl) {
              window.location.href = res.retData.downloadUrl;
            }
          }
        })
        .catch(() => {
          this.pageLoading = false;
        });
    },
    getDetailService (batchNo) {
      this.pageLoading = true;
      ApiRequest(`/dataBatch/purchasePrice/info/${batchNo}`, 'get', {})
        .then((res) => {
          this.pageLoading = false;
          if (isResponseSuccess(res) && res.retData) {
            this.detailObj = res.retData;
          }
        })
        .catch(() => {
          this.pageLoading = false;
        });
    },
    // 刷新进度
    handleGoBack () {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.detail-wrap {
  .top-content {
    float: right;
    margin-bottom: 10px;
  }
  .card {
    margin-bottom: 20px;
  }
  .flow-card {
    width: 100%;
    .flow-wrap {
      display: flex;
      justify-content: center;
      padding: 20px 0;
      img {
        margin: 10px auto;
        display: block;
      }
      .text {
        font-size: 14px;
        color: #666;
        line-height: 22px;
        font-weight: 400;
      }
      .associated {
        width: 60px;
        text-align: center;
      }
      .line-grey {
        width: 19%;
        height: 2px;
        background: #d7d7d7;
        border-radius: 1px;
        margin-top: 34px;
      }
      .line-blue {
        width: 19%;
        height: 2px;
        background: #2898ed;
        border-radius: 1px;
        margin-top: 32px;
      }
    }
  }
  .form-card {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    .left-wrap {
      float: left;
      color: #666;
      width: 50%;
      border-right: 1px dashed #dadada;
      padding-right: 20px;
      .item {
        border-bottom: 1px solid #eee;
        padding: 10px;
        .account {
          color: #d0021b;
          float: right;
        }
      }
      .btn-wrap {
        margin: 20px 0;
        button {
          margin-right: 10px;
        }
      }
    }
    .right-wrap {
      width: 49%;
      float: right;
      /deep/.el-select {
        width: 100%;
      }
    }
  }
  .info-card {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    .item {
      margin-right: 30px;
    }
  }
}
</style>
